<template>
  <view class="application-item" @click="$emit('click')">
    <view class="application-item__header">
      <view class="application-item__title">{{ title }}</view>
      <view 
        class="application-item__status"
        :class="`application-item__status--${statusClass}`"
      >
        {{ statusText }}
      </view>
    </view>
    <view class="application-item__time">申请时间：{{ formatDate(createTime) }}</view>
    <view v-if="feedback" class="application-item__feedback">
      反馈：{{ feedback }}
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

defineEmits(['click']);

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  status: {
    type: String,
    default: 'pending'
  },
  createTime: {
    type: Number,
    required: true
  },
  feedback: {
    type: String,
    default: ''
  }
});

// 获取状态文本
const statusText = (() => {
  const statusMap = {
    'pending': '待审核',
    'viewed': '已查看',
    'interview': '待面试',
    'accepted': '已录用',
    'rejected': '已拒绝'
  };
  return statusMap[props.status] || '未知状态';
})();

// 获取状态样式类
const statusClass = (() => {
  return props.status || 'pending';
})();

// 格式化日期
const formatDate = (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};
</script>

<style lang="scss" scoped>
.application-item {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  &__title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  
  &__status {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
    
    &--pending {
      background-color: #e6f7ff;
      color: #1890ff;
    }
    
    &--viewed {
      background-color: #f6ffed;
      color: #52c41a;
    }
    
    &--interview {
      background-color: #fff7e6;
      color: #fa8c16;
    }
    
    &--accepted {
      background-color: #f6ffed;
      color: #52c41a;
    }
    
    &--rejected {
      background-color: #fff1f0;
      color: #f5222d;
    }
  }
  
  &__time {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
  }
  
  &__feedback {
    font-size: 13px;
    color: #666;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    line-height: 1.5;
  }
}
</style>
